<script setup="">
import Card from "../help/Card.vue";
import {EchartsOptions} from "../help/index.js";
import {nextTick,ref} from "vue";


const id = ref(Math.random().toString(36).substring(2, 9))

const option = {
  color: ['#3399CC'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    show: false
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['组1','组2','组3','组4','组5','组6']
  },
  series: [
    {
      name: '成绩',
      type: 'bar',
      barWidth: '23',
      data: [100, 80, 60, 90, 75, 100]
    },
  ]
}

nextTick(() => {
  EchartsOptions(option, id.value)
})

</script>

<template>
  <div class="w-full h-full basis-2/5 animate__animated animate__fadeInBottomLeft">
    <Card title="各组完成情况">
      <div class="w-full h-full" :id="id"></div>
    </Card>
  </div>
</template>
